<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>登陆系统</title>
<link rel="icon" href="favicon.ico">
<link href="static/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="static/validationEngine/validationEngine.jquery.min.css" rel="stylesheet">
<link href="css/css.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
<link href="css/form-elements.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="static/jquery.min.js"></script>
<script src="static/purl.min.js"></script>
<script src="static/jquery.backstretch.min.js"></script>
<script src="static/validationEngine/jquery.validationEngine-zh_CN.min.js"></script>
<script src="static/validationEngine/jquery.validationEngine.min.js"></script>
<script type="text/javascript">
	$(function(){
		if($("#form-username").val()==""){
			$("#form-username").focus();
		}
		$(document).keydown(function(event){
			if(event.keyCode==13){
				$("#login_form").submit();
			}
		});
		$.backstretch("image/backimg.jpg");
		$("input[name='requri']").val($.url(window.location.href).param('requri'));
		$("#login_form").validationEngine('attach', {
			showOneMessage: false,
			"custom_error_messages": {
				"#username": {
					'required': {
						'message': "请填写用户名"
					},
					'custom[email]': {
						'message': "邮件格式错误"
					}
				}
			},
			promptPosition: "top",
			scroll: false,
			onValidationComplete: function(form, status) {
				//可以通过这里阻止表单提交
				console.log("The form status is: " + status + ", it will never submit");
				return status;
			}
		});
	});
</script>
</head>
<body>
	<div class="container">
		<div class="top-content">
			<div class="inner-bg">
				<div class="container">
					<div class="row">
						<div class="col-sm-8 col-sm-offset-2 text">
							<h1>
								<strong>欢迎使用</strong>
							</h1>
							<div class="description">
								<p>
									This is a free responsive login form made with Bootstrap.
									Download it on <a href="http://azmind.com/"><strong>AZMIND</strong></a>,
									customize and use it as you like!
								</p>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-6 col-sm-offset-3 form-box">
							<div class="form-top">
								<div class="form-top-left">
									<h3>登陆</h3>
									<p>Enter your username and password to log on:</p>
								</div>
								<div class="form-top-right"></div>
							</div>
							<div class="form-bottom">
								<form role="form" action="login" method="post"
									class="login-form" id="login_form">
									<div class="form-group">
										<label class="sr-only" for="form-username">用户名</label> <input
											name="username" placeholder="Username..."
											class="validate[required] form-username form-control input-error"
											id="form-username" type="text">
									</div>
									<div class="form-group">
										<label class="sr-only" for="form-password">密码</label> <input
											name="password" placeholder="Password..."
											class="validate[required] form-password form-control input-error"
											id="form-password" type="password">
									</div>
									<input name="requri" type="hidden" value=""/>
									<button type="submit" class="btn">登陆</button>
								</form>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-6 col-sm-offset-3 social-login">
							<h3>...or login with:</h3>
							<div class="social-login-buttons">
								<a class="btn btn-link-2" href="#"> Facebook </a> <a
									class="btn btn-link-2" href="#"> Twitter </a> <a
									class="btn btn-link-2" href="#"> Google Plus </a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>